<!--表格组件 -->
<template>
<!--  <section class="ces-table-page" v-if="tableData.length || loading">-->
    <section class="ces-table-page">
    <!-- 表格操作按钮 -->
    <section class="ces-handle" v-if="isHandle">
      <el-button
        v-for="item in tableHandles"
        :key="item.label"
        :size="item.size || size"
        :type="item.type || type"
        :icon="item.icon"
        @click="item.handle(that)"
        >{{ item.label }}
      </el-button>
    </section>
    <!-- 数据表格 -->
    <!-- 高度暂时 -->
    <section class="ces-table">
      <!-- height="280px" -->

      <el-table
        :data="tableData"
        style="width: 100%"
        :border="isBorder"
        @select="select"
        @select-all="selectAll"
        @selection-change="selectChange"
        @sort-change="sortChange"
        @filter-change="filterChange"
        v-loading="loading"
        :defaultSelections="defaultSelections"
        ref="comTable"
      >
        <el-table-column
          fixed
          v-if="isSelection"
          type="selection"
          align="center"
        ></el-table-column>
        <el-table-column
          v-if="isIndex"
          type="index"
          :label="indexLabel"
          align="center"
        ></el-table-column>
        <!-- 数据栏 -->
        <el-table-column
          v-for="item in tableCols"
          :show-overflow-tooltip="item.type != 'button'"
          :sortable="item.sortable"
          :column-key="item.key"
          :formatter="item.formatter"
          :filter-multiple="item.isMultiple"
          :filters="item.filters"
          :filter-method="item.filterMethod"
          :key="item.id"
          :prop="item.prop"
          :label="item.label"
          :min-width="item.width"
          :align="item.align"
          :fixed="item.fixed"
          :render-header="item.require ? renderHeader : null"
        >
          <template slot-scope="scope">
            <!-- html -->
            <span
              v-if="item.type === 'html'"
              v-html="item.html(scope.row)"
            ></span>
            <!-- 按钮 -->
            <div class="el-table-btngroup" v-if="item.type === 'button'">
              <template v-for="btn in item.btnList">
								<span>{{!btn.changBtn && validRouteButton(btn.permissionKey)}}</span>
								<span>{{btn.changBtn}}++{{validRouteButton(btn.permissionKey)}}</span>
                <button
                  v-if="!btn.changBtn && validRouteButton(btn.permissionKey)"
                  class="el-table-btn"
                  :disabled="btn.isDisabled && btn.isDisabled(scope.row)"
                  :type="btn.type || type"
                  @click="btn.handle(that, scope.row)"
                >
                  <span>
                    <i class="iconfont" :class="btn.icon"></i
                    ><em v-text="btn.label"></em>
                  </span>
                </button>

                <button
                  v-if="btn.changBtn && validRouteButton(btn.permissionKey)"
                  class="el-table-btn"
                  :disabled="btn.isDisabled && btn.isDisabled(scope.row)"
                  :type="btn.type || type"
                  @click="btn.handle(that, scope.row)"
                >
                  <!--                  变化btn 处理-->
                  <template>
                    <slot :name="btn.slotName" :scope="scope.row"></slot>
                  </template>
                </button>
              </template>

              <!-- 资源管理 开启关闭系统暂单独处理 -->
            </div>
            <!-- 输入框 -->
            <el-input
              v-if="item.type === 'input'"
              v-model="scope.row[item.prop]"
              :size="size || btn.size"
              :disabled="item.isDisabled && item.isDisabled(scope.row)"
              @focus="item.focus && item.focus(scope.row)"
            >
            </el-input>
            <!-- 下拉框 -->
            <el-select
              v-if="item.type === 'select'"
              v-model="scope.row[item.prop]"
              :size="size || btn.size"
              :props="item.props"
              :disabled="item.isDisabled && item.isDisabled(scope.row)"
              @change="item.change && item.change(that, scope.row)"
            >
              <el-option
                v-for="op in item.options"
                :label="op.label"
                :value="op.value"
                :key="op.value"
              ></el-option>
            </el-select>
            <!-- 单选 -->
            <el-radio-group
              v-if="item.type === 'radio'"
              v-model="scope.row[item.prop]"
              :disabled="item.isDisabled && item.isDisabled(scope.row)"
              :size="size || btn.size"
              @change="item.change && item.change(that, scope.row)"
            >
              <el-radio
                v-for="ra in item.radios"
                :label="ra.value"
                :key="ra.value"
                >{{ ra.label }}
              </el-radio>
            </el-radio-group>
            <!-- 复选框 -->
            <el-checkbox-group
              v-if="item.type === 'checkbox'"
              v-model="scope.row[item.prop]"
              :disabled="item.isDisabled && item.isDisabled(scope.row)"
              :size="size || btn.size"
              @change="item.change && item.change(that, scope.row)"
            >
              <el-checkbox
                v-for="ra in item.checkboxs"
                :label="ra.value"
                :key="ra.value"
                >{{ ra.label }}
              </el-checkbox>
            </el-checkbox-group>
            <!-- 开关 -->
            <el-switch
              v-if="item.type === 'switch'"
              v-model="scope.row[item.prop]"
              :size="size || btn.size"
              :active-value="item.values && item.values[0]"
              :inactive-value="item.values && item.values[1]"
              :disabled="item.isDisabled && item.isDisabled(scope.row)"
              @change="item.change && item.change(scope.row)"
            ></el-switch>
            <!-- 图像 -->
            <img
              v-if="item.type === 'image'"
              :src="scope.row[item.prop]"
              @click="item.handle && item.handle(scope.row)"
            />
            <!-- 滑块 -->
            <el-slider
              v-if="item.type === 'slider'"
              v-model="scope.row[item.prop]"
              :disabled="item.isDisabled && item.isDisabled(scope.row)"
              :size="size || btn.size"
              @change="item.change && item.change(scope.row)"
            ></el-slider>
            <!-- 默认 -->
            <span
              style="
                display: flex;
                justify-content: flex-start;
                align-items: center;
              "
              v-if="!item.type"
              :style="item.itemStyle && item.itemStyle(scope.row)"
              :size="size || btn.size"
              :class="item.itemClass && item.itemClass(scope.row)"
            >
              <span class="overflow-ellipsis">
                {{
                  (item.formatter && item.formatter(scope.row)) ||
                  scope.row[item.prop]
                }}
              </span>

              <!--是否显示标签-->
              <template v-if="item.showTag">
                <slot :name="item.tagSlotName" :scope="scope.row"></slot>
              </template>
            </span>
						<!-- a链接 -->
						<el-link
							v-if="item.type === 'link'"
							type="primary"
							target="_blank"
							@click="item.handle && item.handle(scope.row)"
							>
							{{ (item.formatter && item.formatter(scope.row)) || scope.row[item.prop] }}
						</el-link>
          </template>
        </el-table-column>
      </el-table>
    </section>
    <!-- 分页 -->
    <section class="data-pagination" v-if="isPagination">
      <el-pagination
        @current-change="tablePage.handlePageNumChange(that, arguments[0])"
        @size-change="tablePage.handlePageSizeChange(that, arguments[0])"
        layout="total,sizes ,prev, pager, next,jumper"
        :page-size="tablePage.pageSize"
        :current-page.sync="tablePage.pageNum"
        :total="tablePage.total"
      ></el-pagination>
    </section>
  </section>

<!--  <cEmpty v-else></cEmpty>-->
</template>

<script>

export default {
  name: "ComTable",
  components: {
  },
  props: {
    that: {
      type: Object,
      default: function () {
        return this;
      },
    },
    // 表格型号：mini,medium,small
    size: { type: String, default: "mini" },
    type: { type: String, default: "primary" },
    isBorder: { type: Boolean, default: true },
    loading: { type: Boolean, default: false },
    // 表格操作
    isHandle: { type: Boolean, default: false },
    tableHandles: { type: Array, default: () => [] },
    // 表格数据
    tableData: { type: Array, default: () => [] },
    // 表格列配置
    tableCols: { type: Array, default: () => [] },
    // 是否显示表格复选框
    isSelection: { type: Boolean, default: false },
    defaultSelections: { type: [Array, Object], default: () => null },
    // 是否显示表格索引
    isIndex: { type: Boolean, default: false },
    indexLabel: { type: String, default: "#" },
    // 是否显示分页
    isPagination: { type: Boolean, default: true },
    // 分页数据
    tablePage: {
      type: Object,
      default: () => ({ pageSize: 10, pageNum: 1, total: 0 }),
    },
  },
  data() {
    return {};
  },
  watch: {
    defaultSelections(val) {
      this.$nextTick(function () {
        if (Array.isArray(val)) {
          val.forEach((row) => {
            this.$refs.comTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.comTable.toggleRowSelection(val);
        }
      });
    },
  },
  methods: {
    // 表格勾选
    select(rows, row) {
      console.log(rows);
      this.$emit("select", rows, row);
    },
    // 全选
    selectAll(rows) {
      this.$emit("select", rows);
    },
    // 勾选变化
    selectChange(rows) {
      // this.$emit('select',rows)
    },
    sortChange(column) {
      this.$emit("sort", column);
    },
    filterChange(column) {
      this.$emit("filterChange", column);
    },
    //
    // handleCurrentChange(val){
    //   this.tablePage.pageNum = val;
    //   this.$emit('refresh');
    // },
    // handleSizeChange(val) {
    //   this.tablePage.pageSize = val;
    //   this.$emit('refresh');
    // },

    // tableRowClassName({rowIndex}) {
    //     if (rowIndex % 2 === 0) {
    //         return "stripe-row";
    //     }
    //     return "";
    // }
    renderHeader(h, obj) {
      return h("span", { class: "ces-table-require" }, obj.column.label);
    },
  },
};
</script>
<style lang="less">
@import "~@/assets/css/base.less";

.ces-table-page {
  .com-pagination {
    .flex();
    margin-top: 15px;
  }

  .overflow-ellipsis {
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .ces-table-require::before {
    content: "*";
    color: red;
  }

  .el-tag {
    margin-left: 5px;
  }
}
</style>
